<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dropdown-1 {
            /* 容器必须显式声明相对定位
             容器中最好仅声明一个悬浮项*/
            position: relative;
            display: inline-block;
        }
        /* 容器中的，下拉项 */
        .dropdown-1 .dropdown-menu-1 {
            /* 下拉内容不占用空间 */
            display: none;
            /* 基于下拉容器的绝对定位 */
            position: absolute;
            background: red;
            z-index: 1;
        }
        /* 当悬浮于容器时，显示容器中的下拉项 */
        .dropdown-1:hover .dropdown-menu-1 {
            display: block;
        }
        /* ---------------------------- */
        .dropdown-2 {
            position: relative;
            display: inline-block;
        }

        button.dropdown-toggle-2 {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropdown-menu-2 {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown-2:hover .dropdown-menu-2 {
            display: block;
        }
        /* ------------------------ */
        .dropdown-3 {
            position: relative;
            display: inline-block;
        }
        .dropdown-3 .dropdown-toggle-3{
            width: 200px;
            object-fit: contain;
        }
        .dropdown-3 .dropdown-menu-3 {
            display: none;
            position: absolute;
            width: 400px;
            object-fit: contain;
            text-align: center;
            z-index: 1;
        }
        .dropdown-3:hover .dropdown-menu-3 {
            display: block;
        }
    </style>
</head>
<body>
<h3>CSS Dropdowns</h3>
<div class="dropdown-1">
    <span>Mouse over me</span>
    <div class="dropdown-menu-1">
        <p>Hello World!</p>
    </div>
</div>
<hr>
<h3>Dropdown Menu</h3>
<div class="dropdown-2">
    <button class="dropdown-toggle-2">
        Mouse over me
    </button>
    <div class="dropdown-menu-2">
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
        </ul>
    </div>
</div>
<hr>
<h3>Dropdown Image</h3>
<div class="dropdown-3">
    <img class="dropdown-toggle-3" src="../resources/images/paris.jpg" alt="paris">
    <div class="dropdown-menu-3">
        <img src="../resources/images/paris.jpg" alt="paris">
        <p>Paris, France</p>
    </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, omnis.</p>
</body>
</html>